@(qcmForm: Form[Qcm], dateOuverture: String, dateFermeture: String)

@main("Initialisation") { 
@header()
	@helper.form(action = routes.CreateQCM.submit(1)) {
	
	<fieldset>
	<div class="bs-docs-example" >
	<div class="bs-docs-example-after" >
		Etape 1 sur 4
		</div>	
				<legend>QCM : Information gen&eacute;ral</legend>	
					<div>
					<label>Libell&eacute; : </label>
					<INPUT type="text" name="libelle" value="@qcmForm("libelle").valueOr("")" required>
					</div>
					
					<div class="row">
					<div class="span6">
				    <div class="control-group ouv input-append date" id="datetimepicker">
				    	<label>Date d'ouverture du Qcm : </label>
				     		<div class="controls">
				        		<input type="text" id="dateOuverture" name ="dateOuverture" value="@dateOuverture" required>
				        		<span class="add-on">
									<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
					    		</span>
				        		<div class="alertouv alert-error hide">
				          			<h4 class="alert-heading">&nbsp Erreur &nbsp</h4>
				          			<h6 class="alert-heading">&nbsp &nbsp La date d'ouverture doit &ecirctre dans le futur &nbsp&nbsp&nbsp&nbsp</h6>
				          		</div>
				      		</div>
				    </div>
				    </div>
				    <div class="span6">
				    <div class="control-group clo input-append date" id="datetimepickercl">
				      <label>Date de cloture du Qcm : </label>
				      <input type="text" name ="dateCloture" id="dateCloture" value="@dateFermeture" required></input>
				      <span class="add-on">
				        	<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
				      </span>
				        		<div class="alertclo alert-error hide">
				          			<h4 class="alert-heading">&nbsp Erreur &nbsp</h4>
				          			<h6 class="alert-heading">&nbsp &nbsp La date de cloture doit &ecirctre apr&egraves la date d'ouverture &nbsp&nbsp&nbsp&nbsp</h6>
				          		</div>
				 	</div>
				 	</div>
				 	</div>
		<div class="actions">
			<p>
				<button type="submit" value="etape2"class="btn btn-primary">Etape 2 
					<i class="icon-white icon-circle-arrow-right"></i>
				</button>
			</p>
		</div>
		</div>	 		 			 		
		</fieldset> 			
		
<script type="text/javascript">
  $(function(){
    $("form").on("submit", function(){
    	var selectedDate = $('#dateOuverture').val();
    	var selectedDateClo = $('#dateCloture').val();
    	
    	var dateString = selectedDate;
    	var dateStringClo = selectedDateClo;
    	
    	var reggie = /(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2})/;
    	var dateArray = reggie.exec(dateString); 
    	var dateObject = new Date(
    	    (+dateArray[3]),
    	    (+dateArray[2])-1, 
    	    (+dateArray[1]),
    	    (+dateArray[4]),
    	    (+dateArray[5])
    	);
    	var now = new Date();
    	if (dateObject < now) {
    		$("div.ouv").addClass("error");
            $("div.alertouv").show("slow").delay(3500).hide("slow");
            return false;
    	}
        
    	var dateArrayClo = reggie.exec(dateStringClo); 
    	var dateObjectClo = new Date(
    	    (+dateArrayClo[3]),
    	    (+dateArrayClo[2])-1, 
    	    (+dateArrayClo[1]),
    	    (+dateArrayClo[4]),
    	    (+dateArrayClo[5])
    	);
		
    	if (dateObjectClo < dateObject) {
    		$("div.clo").addClass("error");
            $("div.alertclo").show("slow").delay(3500).hide("slow");
            return false;
    	}
    });
  });
</script>

 
<script type="text/javascript">
				    	$('#datetimepicker').datetimepicker({
				        format: 'dd/MM/yyyy hh:mm'
				      });
				 	</script>
				 	<script type="text/javascript">
				    	$('#datetimepickercl').datetimepicker({
				        format: 'dd/MM/yyyy hh:mm'
				      });
				 	</script>
	}
}